import {
  Form,
  Button,
  Col,
  Row,
  Input,
  Select,
  DatePicker,
  Table,
  message,
} from "antd";
import React, { Component } from "react";
import moment from "moment";
import {
  Quotationdetail,
  Orderadd,
  Quotationmatch,
} from "../../../services/auth";
import { getToken } from "../../../utils/auth";

// form中的属性
const { Option } = Select;
const { RangePicker } = DatePicker;

export default class Quot_CreateOrder extends Component {
  constructor(props) {
    super(props);
    const { handleCreateClick } = this.props;
    this.handleCreateClick = handleCreateClick;
    // 父类的state
    this.state = {
      // 这个是商品数据
      dataSource: [],
      // 这个是可用于生成报价单的询价单列表
      quotationList: [],
    };
    // editableTable的列
    this.columns = [
      {
        title: "产品编号",
        dataIndex: "goods_id",
      },
      {
        title: "产品名称",
        dataIndex: "goods_name",
      },
      {
        title: "订货数量",
        dataIndex: "quantity",
      },
      {
        title: "产品定价",
        dataIndex: "price",
      },
      {
        title: "折扣",
        dataIndex: "discount",
        width: "15%",
        editable: true,
      },
      {
        title: "产品价格",
        dataIndex: "current_price",
      },
    ];
    this.user = JSON.parse(getToken());
    this.company_id = "";
  }
  formRef = React.createRef();
  // 获得询价单列表
  componentDidMount() {
    Quotationmatch(this.user.id, this.user.authority).then(
      (response) => {
        //拿到我们想要渲染的数据(res)
        this.setState({
          quotationList: response.data,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }
  // 选项改变就触发下面这个函数
  onSelectChange = (value) => {
    if (value) {
      Quotationdetail(value).then(
        (response) => {
          this.company_id = response.data.company_id;
          //拿到我们想要渲染的数据(res)
          this.setState({
            dataSource: [
              ...response.data.goods,
              {
                key: response.data.goods.length,
                goods_id: "总计",
                discount: response.data.discount,
                current_price: response.data.total_price,
              },
            ],
          });
          this.formRef.current.setFieldsValue({
            company:
              response.data.company_id + " " + response.data.company_name,
            req_deliv_date: moment(response.data.req_deliv_date, "YYYY-MM-DD"),
            ship_to_address: response.data.ship_to_address,
            valid: [
              moment(response.data.valid_from, "YYYY-MM-DD"),
              moment(response.data.valid_to, "YYYY-MM-DD"),
            ],
          });
        },
        (error) => {
          console.log("失败了", error);
        }
      );
    } else {
      this.formRef.current.resetFields();
      this.setState({ dataSource: [] });
    }
  };
  // 点击提交后触发的事件
  onFinish = (values) => {
    Orderadd({
      quotation_id: values.quotation_id,
      company_id: this.company_id,
      discount:
        this.state.dataSource[this.state.dataSource.length - 1].discount,
      total_price:
        this.state.dataSource[this.state.dataSource.length - 1].current_price,
      company: values.company,
      operator_id: this.user.id,
      req_deliv_date: values.req_deliv_date.format("YYYY-MM-DD"),
      ship_to_address: values.ship_to_address,
      goods: this.state.dataSource,
    }).then(
      (response) => {
        if (response.data.result === "success") {
          message.success("订单" + response.data.order_id + "已创建成功");
          this.formRef.current.resetFields();
          this.handleCreateClick();
        } else {
          message.info("提交失败，请重试");
        }
      },
      (error) => {
        console.log("数据获取失败", error);
      }
    );
    console.log({
      quotation_id: values.quotation_id,
      company_id: this.company_id,
      discount:
        this.state.dataSource[this.state.dataSource.length - 1].discount,
      total_price:
        this.state.dataSource[this.state.dataSource.length - 1].current_price,
      company: values.company,
      operator_id: this.user.id,
      req_deliv_date: values.req_deliv_date.format("YYYY-MM-DD"),
      ship_to_address: values.ship_to_address,
    });
  };
  onReset = () => {
    this.formRef.current.resetFields();
    this.setState({ dataSource: [] });
  };

  render() {
    const { dataSource } = this.state;
    return (
      <Form
        layout="vertical"
        hideRequiredMark
        onFinish={this.onFinish}
        ref={this.formRef}
      >
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="quotation_id"
              label="报价单编号"
              rules={[{ required: true, message: "请选择询价单" }]}
            >
              <Select
                placeholder="请选择报价单"
                onChange={this.onSelectChange}
                allowClear
              >
                {this.state.quotationList.map((quotation) => (
                  <Option value={quotation.id} key={quotation.id}>
                    {quotation.id}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="company" label="公司">
              <Input disabled />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item
              name="valid"
              label="生效期限"
              rules={[{ required: true, message: "请填写生效期限" }]}
            >
              <RangePicker disabled />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="req_deliv_date" label="预计送达日期">
              <DatePicker disabled />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="ship_to_address" label="送货地点">
              <Input disabled />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24} />
        <Table
          bordered
          dataSource={dataSource}
          columns={this.columns}
          pagination={false}
        />
        <Form.Item>
          <div
            style={{
              textAlign: "right",
              marginTop: "24px",
            }}
          >
            <Button htmlType="reset" style={{ marginRight: 8 }}>
              重置
            </Button>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </div>
        </Form.Item>
      </Form>
    );
  }
}
